import React, { Component } from 'react'

export default class App extends Component {
    state={
        count:1
    }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handelAdd1}>add1</button>
        <button onClick={this.handelAdd2}>add2</button>
      </div>
    )
  }
// setSate处在同步逻辑中，异步更新状态，异步更新真实dom，为了性能
// setSate处在异步逻辑中，同步更新状态，同步更新真实dom
// setSate接受第二个参数，是回调函数，状态和dom更新完后会触发
// 
  handelAdd1=()=>{
    this.setState({
        count:this.state.count+1
    },()=>{
        console.log(this.state.count);
    })
    this.setState({
        count:this.state.count+1
    },()=>{
        console.log(this.state.count);
    })
    this.setState({
        count:this.state.count+1
    },()=>{
        // 状态和真实dom更新完了
        console.log(this.state.count);
    })
  }
  handelAdd2=()=>{
    setTimeout(()=>{
        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);

        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);

        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);

      
    },2)

}
}
